<template>
    <el-container class="container" :style="{backgroundImage: `url(${interStore.currentBackgroundImage})`, height: height + 'px'}">
        <div class="main" :style="{ transform: `scale(${interStore.size / 100})` }">
            <date-time class="date-time" />
            <search class="search" />
            <group-tag class="tag" />
        </div>

        <div class="tools">
            <div class="menu">
                    <div class="item" @click="drawerInterfaceUpdate = true">
                        <el-icon style="color: var(--lan-main-font-color)">
                            <More />
                        </el-icon>
                    </div>
            </div>
        </div>
        <interface-update v-model="drawerInterfaceUpdate" />
    </el-container>
</template>

<script setup>
import { ref } from 'vue'
import interfaceStore from "@/stores/interfaceStore"

const interStore = interfaceStore()

const height = ref(0)

const drawerInterfaceUpdate = ref(false)

function updateWindow() {
    height.value = window.innerHeight - 1
}

onMounted(() => {
    updateWindow()
    window.addEventListener('resize', updateWindow)
    window.addEventListener('orientationchange', updateWindow) // 移动端横竖屏切换
})

onUnmounted(() => {
    window.removeEventListener('resize', updateWindow)
    window.removeEventListener('orientationchange', updateWindow)
})

</script>

<style scoped lang="scss">
.container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--lan-main-background-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.date-time {
    width: 100%;
    margin-bottom: 20px;
}

.search {
    height: 50px;
    margin-bottom: 20px;
}

.tools {
    .menu {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: rgba(245, 247, 250, 0.6);

        .item {
            border-radius: 4px;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.system-info {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
</style>